<template>
  <div>
    <div class="container" v-if="data">
    <h2>合肥婚庆三大金刚</h2>
      <section class="team" id="team">
        <div class="heading">
          <h3>婚礼司仪</h3>
          <img src="" alt="" />
        </div>

        <div class="box-container">
          <div class="box" @click="goto2(2)">
            <img :src="`/marry pic/${data[1].p_pic}`" alt="" />
            <h3>{{ data[1].p_name }}</h3>
            <span>wedding planner</span>
            <p style="font-size:15px">
              与千万人之中遇见你所遇见的人，没有早一步，也没有晚一步，刚巧赶上。我想这就是缘分，缘分不是诗，但他比诗更美，缘分不是酒，但是他比酒更浓。其实缘分和爱情一样，都需要用心去珍惜，用心去呵护，正因为如此，人们才会从陌生到熟悉，从相遇相识到相知，正因为如此，我们的一对新人才会在茫茫的人海中相遇，在经历了生活的磨砺和感情的磨合。
            </p>
          </div>
          <div class="box" @click="goto2(3)">
            <img :src="`/marry pic/${data[2].p_pic}`" alt="" />
            <h3>{{ data[2].p_name }}</h3>
            <span>wedding planner</span>
            <p style="font-size:15px">
              十六岁是花季，十七岁是雨季，春水初生，春林初盛，春风十里不如你。想和你情窦初开，也想和你两鬓斑白。回头想想，花季雨季里喜欢的人，就连坐同一班公交车，内心都是幸福的。凑了一星期零花钱，约她吃一餐麦当劳；打了好几通电话，终于可以和她漫步细软的沙滩，兜风的夜晚，摩托车狂野的轰鸣，不及她双手环在腰间时的心跳。这些都是七年前锴炼和赵兰珍藏的美好回忆。
            </p>
          </div>
          <div class="box" @click="goto2(4)">
            <img :src="`/marry pic/${data[3].p_pic}`" alt="" />
            <h3>{{ data[3].p_name }}</h3>
            <span>wedding planner</span>
            <p style="font-size:15px">
              私认为悲凉才是生活的底色，我也不觉得世界到处充满着美好，平淡和坎坷也同样是我们今后都要去面对的生活。就像父母终将会老去，我们的孩子也会长大成人去找寻自己的幸福。只有你我二人今后才会在人世间一直陪伴着彼此，所以呢，我们更要珍重在这一刻为彼此所做出的选择。
            </p>
          </div>
        </div>
      </section>
      <!-- 婚礼主持 -->

      <section class="vendor" id="vendor">
        <div class="heading">
          <h3>婚礼摄影</h3>
          <img src="" alt="" />
        </div>

        <div class="box-container">
          <div class="box" @click="goto(1)">
            <img :src="`/marry pic/${data[4].p_pic}`" alt="" />
            <div class="info">
              <h3>南昌婚礼</h3>
              <p>南昌婚礼 | 那个美好到极致的夏日黄昏</p>
            </div>
          </div>

          <div class="box" @click="goto(2)">
            <img :src="`/marry pic/${data[5].p_pic}`" alt="" />
            <div class="info">
              <h3 >邯郸婚礼</h3>
              <p>邯郸婚礼 | 从城市到乡村，一场午宴婚礼可以幸福得如此淋漓尽致</p>
            </div>
          </div>

          <div class="box"  @click="goto(3)">
            <img :src="`/marry pic/${data[6].p_pic}`" alt="" />
            <div class="info">
              <h3>江苏宿迁婚礼</h3>
              <p>江苏宿迁婚礼 | 或许，真实就是意义，我们终将回归</p>
            </div>
          </div>

          <div class="box"  @click="goto(4)">
            <img :src="`/marry pic/${data[7].p_pic}`" alt="" />
            <div class="info">
              <h3>宁波婚礼</h3>
              <p>宁波婚礼 | 婚礼的意义不是两个人或一群人合演一场戏</p>
            </div>
          </div>
        </div>
      </section>
      <!-- 婚礼摄像 -->

      <section class="blog" id="blog">
        <div class="heading">
          <h3>婚礼跟妆</h3>
          <img alt="" />
        </div>

        <div class="box-container">
          <div class="box" @click="goto1(1)">
            <img :src="`/marry pic/${data[9].p_pic}`" alt="" />
            <div class="info">
              <h3><span>01. </span>跟妆流程具体</h3>
              <p>
                在婚礼这一天，新娘会让化妆师负责跟妆，给她们化妆、做造型，让每一位新娘都能以自己人生中最美的状态在宾客亲朋亮相。
              </p>
            </div>
          </div>
          <div class="box" @click="goto1(2)">
            <img :src="`/marry pic/${data[8].p_pic}`" alt="" />
            <div class="info">
              <h3><span>02. </span>妆容注意事项</h3>
              <p>
                结婚当天，每个新娘都希望自己是美美的。但是吵闹的事情总会影响到新娘子的妆容，因此对一个新娘来说有一个跟妆是必不可少的。那么结婚当天，这个跟妆到底需要注意哪些事情呢？
              </p>
            </div>
          </div>
          <div class="box" @click="goto1(3)">
            <img :src="`/marry pic/${data[11].p_pic}`" alt="" />
            <div class="info">
              <h3><span>03. </span>婚礼跟妆收费详情</h3>
              <p>
                婚礼当天，每个女孩子都希望自己是最漂亮的新娘子，时刻要保持好美丽的妆容。这时有个不错的化妆师，就显得很重要了，但也因结婚预算，新娘子会考虑新娘妆费用问题。那新娘妆一般收费多少钱，贵吗？
              </p>
            </div>
          </div>
        </div>
      </section>
      <!-- 婚礼跟妆 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getData() {
      const url = "/v2/worker/mainPic";
      this.axios.get(url).then((res) => {
        console.log("mainpi的res", res);
        this.data = res.data.data;
      });
    },
    goto(index){
      this.$router.push('/workerPhoto/' + index)
    },
    goto1(index){
      this.$router.push('/workerHz/' + index)
    },
     goto2(index){
      this.$router.push('/workerMaster/' + index)
    }
  },
  mounted() {
    this.getData();
    // console.log('this.$router',this.$route)
  },
  data() {
    return {
      data: null,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  .vendor{
    margin-top: 1rem;
    user-select: none;
  }
  .vendor .box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .vendor .box-container .box {
    flex: 1 1 30rem;
    margin: 1rem;
    overflow: hidden;
    position: relative;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    height: 25rem;
    cursor: pointer;
  }

  .vendor .box-container .box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .vendor .box-container .box .info {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    transform: scale(1.3);
    opacity: 0;
  }

  .vendor .box-container .box:hover .info {
    transform: scale(1);
    opacity: 1;
  }

  .vendor .box-container .box:hover img {
    transform: scale(1.5);
  }

  .vendor .box-container .box .info h3 {
    font-size: 3rem;
    color: var(--black);
  }

  .vendor .box-container .box .info p {
    font-size: 1.7rem;
    color: red;
    padding: 1rem;
  }
  .team{
    margin-top: 1rem;
    user-select: none;
  }
  .team .box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .team .box-container .box {
    height: 35rem;
    margin: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.9);
    background-image: linear-gradient(to right, #f0c8df, #e8d1e3);
    padding: 1rem 1rem;
    text-align: center;
    background-size: cover;
    flex: 1 1 10rem;
    cursor: pointer;
  }

  .team .box-container .box img {
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    height: 10rem;
    width: 10rem;
    padding: 2rem;
  }

  .team .box-container .box h3 {
    font-size: 2.5rem;
    color: var(--black);
  }

  .team .box-container .box span {
    font-size: 2rem;
    color: var(--pink);
  }

  .team .box-container .box p {
    font-size: 1.5rem;
    color: #333;
    padding: 1rem 0;
  }

  .team .box-container .box .share {
    padding: 1rem 0;
  }

  .team .box-container .box .share a {
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    font-size: 2rem;
    color: var(--black);
    background: #eee;
  }

  .team .box-container .box .share a:hover {
    color: #fff;
    background: var(--pink);
  }

   .blog{
    margin-top: 1rem;
    user-select: none;
  }
  .blog .box-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .blog .box-container .box {
    height: 35rem;
    background: #fff;
    margin: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.9);
    overflow: hidden;
    flex: 1 1 30rem;
    cursor: pointer;
  }

  .blog .box-container .box img {
    height: 25rem;
    width: 100%;
    object-fit: cover;
  }

  .blog .box-container .box .info {
    padding: 2rem;
  }

  .blog .box-container .box .info h3 {
    color: var(--black);
    font-size: 2rem;
  }

  .blog .box-container .box .info h3 span {
    color: var(--pink);
    font-weight: bolder;
  }

  .blog .box-container .box .info p {
    color: #333;
    font-size: 1rem;
    padding: 1rem 0;
  }
}
</style>